<!--#
layout("/layouts/store.html"){
#-->

<script src="${base!}/assets/platform/vendor/echarts/echarts.min.js" type="text/javascript"></script>

<div class="content-wrap">

    <div class="wrapper" style="padding-top: 100px;">
         <h2>商家管理系统</h2>
<!--        <div id="container2" style="height:500px;width:100%;float: left;"></div>-->
<!--        <div id="container3" style="height:500px;width: 50%;float: left;"></div>-->
    </div>

</div>
<script type="text/javascript">
    function chart1(userCount) {

        var dom = document.getElementById("container2");
        var myChart = echarts.init(dom);
        var app = {};
        option = null;
        option = {
            color: ['#3398DB'],
            title: {
                text: '用户总量：'+userCount.count
            },
            tooltip : {
                trigger: 'axis',
                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis : [
                {
                    type : 'category',
                    data : userCount.rqList,
                    axisTick: {
                        alignWithLabel: true
                    }
                }
            ],
            yAxis : [
                {
                    type : 'value'
                }
            ],
            series : [
                {
                    name:'注册量',
                    type:'bar',
                    barWidth: '60%',
                    data:userCount.countList
                }
            ]
        };

        if (option && typeof option === "object") {
            myChart.setOption(option, true);
        }
    }

</script>

<script type="text/javascript">
    function chart2(count) {

        var dom = document.getElementById("container3");
        var myChart = echarts.init(dom);
        var app = {};
        option2 = null;
        app.title = '环形图';

        option2 = {
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)"
            },
            title: {
                text: '订单统计-已支付总订单量：'+count.zCount
            },
            legend: {
                orient: 'vertical',
                x: 'right',
                data: ['实物订单', '视频订单','包月订单']
            },

            series: [
                {
                    name: '订单来源',
                    type: 'pie',
                    radius: count.result,
                    avoidLabelOverlap: false,
                    label: {
                        normal: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: '20',
                                fontWeight: 'bold'
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data: [
                        {value: count.vCount, name: '视频订单'},
                        {value: count.pCount, name: '实物订单'},
                        {value: count.mCount, name: '包月订单'}
                    ]
                }
            ]
        };
        if (option2 && typeof option2 === "object") {
            myChart.setOption(option2, true);
        }
    }
</script>

<script>
    // $.ajax({
    //     url:"${base!}/store/count/getUserCount.html",
    //     type:'POST',
    //     dataType:'JSON',
    //     success:function(data){
    //         if(data.code==0){
    //             var userCount = data.data;
    //             chart1(userCount);
    //         }
    //     },
    //     error:function(data){
    //         console.log(data);
    //     }
    // })
    // $.ajax({
    //     url:"${base!}/store/count/getOrderCount.html",
    //     type:'POST',
    //     dataType:'JSON',
    //     success:function(data){
    //         if(data.code==0){
    //             var count = data.data;
    //             chart2(count);
    //         }
    //     },
    //     error:function(data){
    //         console.log(data);
    //     }
    // })
</script>
<!--#}#-->
